<template>
    <div class="dialog-box-container">
        <div class="dialog-box-title">{{typeName}}</div>
        <ul class="meg-wrapper" v-if="roomRecord">
            <li class="meg-item-wrapper" v-for="(item, index) in roomRecord" :key="index">
                <span class="deta" v-show="item.date">{{item.date}}</span>
                <div :class="['meg-item', {'my-meg': item.senderName === userInfo.username}]">
                    <img class="avatar" :src="item.avatarUrl" alt="">
                    <p class="meg" :username="item.senderName">{{item.message}}</p>
                    <span class="reading">{{item.createTime | filter}}</span>
                </div>
            </li>
        </ul>
        <div class="input-msg">
            <el-input v-model="input" @focus="onfocus" class="input" placeholder="请输入内容"></el-input>
            <el-button-group class="btn-group">
                <el-button type="info" style="margin-right: 10px" @click="onclear">清空</el-button>
                <el-button type="danger" @click="onsend">发送</el-button>
            </el-button-group>
        </div>
    </div>
</template>

<script>
    import { getUserInfo } from "../../common/js/cache";
    export default {
        filters: {
            filter (val) {
                return val && val.split(' ')[1]
            }
        },
        props: {
            typeName: {
                type: String,
                default: ''
            },
            roomRecord: {
                type: Array,
                default: () => []
            }
        },
        data () {
            return {
                input: '',
                megList: [
                    {
                        avatar: 'https://img0.baidu.com/it/u=251289958,1860898046&fm=26&fmt=auto&gp=0.jpg',
                        meg: '三天学会Java',
                        isReading: true,
                        isMy: true,
                        date: '14:17'
                    },
                    {
                        avatar: 'https://img0.baidu.com/it/u=251289958,1860898046&fm=26&fmt=auto&gp=0.jpg',
                        meg: '三天学会Java',
                        isReading: false,
                        isMy: false,
                        date:'18:17'
                    },
                    {
                        avatar: 'https://img0.baidu.com/it/u=251289958,1860898046&fm=26&fmt=auto&gp=0.jpg',
                        meg: '三天学会Java',
                        isReading: true,
                        isMy: false
                    },
                    {
                        avatar: 'https://img0.baidu.com/it/u=251289958,1860898046&fm=26&fmt=auto&gp=0.jpg',
                        meg: '三天学会Java',
                        isReading: false,
                        isMy: true
                    }
                ]
            }
        },
        created () {
           this.userInfo = getUserInfo()
            console.log(this.userInfo)
        },
        methods: {
            isReading (isRead) {
                return isRead ? '已读' : '未读'
            },
            onclear () {
                this.input = ''
            },
            onsend () {
                this.$emit('onsend', this.input)
                this.onclear()
            },
            onfocus () {
                window.addEventListener('keydown', e => {
                    if(e.keyCode === 13 && this.input){
                        this.onsend()
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
    .dialog-box-container {
        border: 1px solid $border-color;
        border-left-color: transparent;
        border-right-color: transparent;
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 0.95);
        .dialog-box-title {
            height: 61px;
            box-sizing: border-box;
            padding-left: 50px;
            line-height: 63px;
            border-bottom: 1px solid $border-color;
            background-color: #ffffff;
            color: $font-gray;
            font-size: 18px;
            font-weight: 700;
            user-select: text;
        }
        .meg-wrapper {
            width: 100%;
            height: 650px;
            overflow-x: hidden;
            overflow-y: auto;
            scroll-behavior: smooth;
            &::-webkit-scrollbar {
                width: 0;
            }
            .meg-item-wrapper {
                padding: 15px 25px;
                text-align: center;
                .deta {
                    display: block;
                    margin-bottom: 15px;
                    line-height: 13px;
                    color: rgb(153, 152, 152);
                    font-size: 12px;
                }
                .meg-item {
                    display: flex;
                    .avatar {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                    }
                    .meg {
                        position: relative;
                        top: 15px;
                        max-width: 260px;
                        line-height: 20px;
                        margin: 0 12px;
                        padding: 10px 18px 10px 10px;
                        box-sizing: border-box;
                        border-radius: 10px;
                        background-color: #f7f7f7;
                        word-break: break-word;
                        user-select: text;
                        &::after {
                            content: attr(username);
                            position: absolute;
                            top: -21px;
                            left: 0;
                            word-break: keep-all;
                            font-size: 12px;
                            opacity: .9;
                        }
                        &::before {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 50%;
                            border: 8px solid transparent;
                            border-left-color: #f7f7f7;
                            border-top-color: #f7f7f7;
                            transform: rotate(-35deg) translate(0, -50%);
                        }
                    }
                    .reading {
                        align-self: flex-end;
                        margin-bottom: 4px;
                        line-height: 13px;
                        color: rgb(153, 152, 152);
                        font-size: 12px;
                    }
                }
                .my-meg {
                    flex-direction: row-reverse;
                    .meg {
                        background-color: #6D9CF8;
                        position: relative;
                        &::after {
                            content: attr(username);
                            position: absolute;
                            top: -21px;
                            right: 10px;
                            left: unset;
                            font-size: 12px;
                            opacity: .9;
                        }
                        &::before {
                            content: '';
                            position: absolute;
                            left: 99%;
                            right: 0;
                            top: 50%;
                            border: 8px solid transparent;
                            border-right-color: #6D9CF8;
                            border-bottom-color: #6D9CF8;
                            transform: rotate(300deg) translate(0, -75%);
                        }
                    }
                }
            }
        }
        .input-msg {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: calc(100% - 650px - 64px);
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            .input {
                ::v-deep .el-input__inner {
                    height: 94px;
                    border-color: transparent !important;
                }
            }
            .btn-group {

            }
        }
    }
</style>
